<template>
	<div style="padding: 10px;">
		<vue-table :data="data" :columns="columns" :config-table="config" :config-event="{
			'row-click':rowClick
		}">
			<template #aa1="scope">
				{{scope.row[scope.column.code]}}
			</template>
		</vue-table> 
	</div>
	 
</template>

<script>
import vueTable from './components/element-plus-table-ext.vue';
import vEcharts from './components/vEcharts.vue'
export default {
  name: 'App',
  components: {
	  vueTable,vEcharts
  },
  data(){
	  return {
		  config:{ 
			height:"400px",
			border:true
		  },
		  data:[
			 
		  ],
		  columns:[
			{code:"name",name:"姓名",sortable:true,dataType:"column"},
			{code:"address",name:"地区",sortable:true,dataType:"column"},
			{code:"date",name:"日期",sortable:true,dataType:"column"},
			{code:"money",name:"支付金额",sortable:true,dataType:"number"},
			{code:"number",name:"购买数量",sortable:true,dataType:"number"},
			{code:"price",name:"单价",sortable:true,dataType:"number"}, 
		  ],
		  optionPie:{
			   tooltip: {
			      trigger: 'item'
			    }, 
			  series: [
			     { 
			       type: 'pie', 
			       data: [
			         { value: 1048, name: 'Search Engine' },
			         { value: 735, name: 'Direct' },
			         { value: 580, name: 'Email' },
			         { value: 484, name: 'Union Ads' },
			         { value: 300, name: 'Video Ads' }
			       ]
			     }
			   ]
		  },
		  option:{  
				yAxis: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				}, 
				series: [
					{
					  name: '销量',
					  type: 'bar',
					  data: [5, 20, 36, 10, 10, 20]
					}
				]
		  }
		  
	  }
  },
  created(){
	  var dataRand={
		  name:['张三','李四','王五','张飞','关羽','小明','小红','小白'],
		  address:['北京','深圳','上海','广州','成都','黑龙江','乌鲁木齐','香港'],
		  date:['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06','2020-07','2020-08','2020-09','2020-10']
	  }
	  for(var i=0;i<30;i++){
		  var row={
			  name:dataRand.name[this.rand(dataRand.name.length)],
			  address:dataRand.address[this.rand(dataRand.address.length)],
			  date:dataRand.date[this.rand(dataRand.date.length)],
			  number:5+this.rand(100),
			  price:5+this.rand(200)
		  };
		  row.money=row.number*row.price; 
		  this.data.push(row);
	  } 
  },
  methods:{
	  rowClick(e){
		  console.log(e);
	  },
	  rand(max){
		return Math.round(Math.random()*(max-1));
	  }
  }
}
</script>
